<template>
    <div class="search-singer-list-box">
        <div class="singer-item" v-for="(singer,index) in singers" :key="index">
            <div class="singer-image-box" @click="toSingerDetail(singer)">
                <img class="image" v-lazy="handleLazyImage(singer.singerPic)" :key="singer.singerPic">
            </div>
            <div class="singer-info">
                <div v-html="singer.singerName" @click="toSingerDetail(singer)"></div>
            </div>
        </div>
    </div>
</template>

<script>
  import SingerDefLazyImg from '../../../../resources/images/singer_300.png'

  export default {
    name: 'm-search-singer-list',
    props: {
      singers: {
        type: Array
      }
    },
    computed: {
      // 图片懒加载 v-lazy配置对象
      handleLazyImage () {
        return (ImgSrc) => {
          return {
            src: ImgSrc,
            error: SingerDefLazyImg,
            loading: SingerDefLazyImg
          }
        }
      }
    },
    methods: {
      toSingerDetail (singer) {
        this.$emit('toSingerDetail', singer)
      }
    }
  }
</script>

<style lang="less">
    .search-singer-list-box {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-right: -15px;

        .singer-item {
            width: 25%;
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column;
            padding-right: 15px;

            .singer-image-box {
                width: 100%;
                border-radius: 50%;
                overflow: hidden;
                cursor: pointer;

                .image {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }

            .singer-info {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: 40px;
                font-size: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: var(--font-base-color);
            }

            .singer-info:hover {
                cursor: pointer;
                color: var(--font-active-color);
            }
        }

        @media (min-width: 1070px) {
            .singer-item {
                width: 25%;
            }
        }

        @media (min-width: 1200px) {
            .singer-item {
                width: 20%;
            }
        }

        @media (min-width: 1400px) {
            .singer-item {
                width: 16.6%;
            }
        }

        @media (min-width: 1650px) {
            .singer-item {
                width: 12.5%;
            }
        }
    }
</style>
